<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-select
        v-model="channels.adminId"
        placeholder="房间类型"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 20px"
      >
        <el-option
          v-for="item in calendarTypeOptions"
          :key="item.type"
          :label="item.display_name"
          :value="item.type"
        />
      </el-select> -->

      <span style="margin-right: 20px">
        <el-date-picker
          v-model="value1"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="消费开始日期"
        />
      </span>
      <span>
        <el-date-picker
          v-model="value2"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="消费截止日期"
        />
      </span>
      <el-input
        v-model="channels.chatNumber"
        placeholder="房间ID"
        style="width: 200px; margin-left: 20px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px"
        @click="handleFilter"
      >
        搜索
      </el-button>

      <el-button class="filter-item" style="float: right" type="primary" icon="el-icon-edit" @click="handleCreate">
        创建聊天室
      </el-button>
    </div>
    <!-- show-summary :summary-method="getSummaries" -->
    <el-table :data="list" stripe style="width: 1200px" border>
      <el-table-column prop="chat_number" label="房间号" width="100" align="center" />
      <el-table-column prop="name" label="房间名称" width="200" align="center" />
      <el-table-column prop="guild_name" label="所属公会" align="center" />
      <!-- <el-table-column prop="" label="房间类型" align="center">
      </el-table-column> -->
      <el-table-column prop="nickname" label="房主" align="center" />
      <el-table-column prop="total_money" label="流水金额(元)" align="center" />
      <el-table-column prop="created" label="开通时间" align="center" width="200" />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope" align="center">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看流水</el-button>
          <!-- <el-button type="text" size="small" @click="editClick(scope.row)"
            >操作</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="channels.pageNo"
      :limit.sync="channels.pageSize"
      @pagination="handleFilter"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
  encryption2
} from '@/api/index'
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      },
      value1: '',
      value2: '',
      channels: {
        adminId: '', // 上级渠道ID
        chatNumber: '',
        pageNo: 1,
        pageSize: 10
      },
      calendarTypeOptions: [],
      total: 0,
      list: []
    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    getSummaries(param) {
      // 此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
      const {
        columns,
        data
      } = param
      const len = columns.length
      const sums = []
      columns.forEach((column, index) => {
        // 如果是第一列，则最后一行展示为“总计”两个字
        if (index === 0) {
          sums[index] = '总计'
          // 如果是最后一列，索引为列数-1，则显示计算总和
        } else if (index === 4) {
          const values = data.map((item) => Number(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = 'N/A'
          }
          // 如果是除了第一列和最后一列的其他列，则显示为空
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 查看流水
    handleClick(row) {
      this.$router.push({
        path: '/UnionRoom/ViewFlow',
        params: {
          roomId: row.roomId
        },
        name: 'ViewFlow'
      })
    },
    // 编辑
    editClick(row) {
      this.$store.dispatch('api/roomlist', row)
      this.$router.push({
        path: '/UnionRoom/editRoom',
        name: 'editRoom'
      })
    },
    // 查询
    handleFilter() {
      const arys = {
        adminId: this.channels.adminId, // 上级渠道ID
        startDate: this.value1 ? this.value1 : '', // 消费开始时间
        endDate: this.value2 ? this.value2 : '', // 消费结束时间
        chatNumber: this.channels.chatNumber, // 推荐码
        pageNo: this.channels.pageNo,
        pageSize: this.channels.pageSize
      }
      const url = '/room/roomList'
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.list = res.data.result
        } else {
          this.$message.error(res.data.text)
        }
      })
    },
    handleCreate() {
      this.$router.push({
        path: '/UnionRoom/CreateRoom',
        name: 'CreateRoom'
      })
    }
  }
}
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .filter-container {
    width: 1200px;
  }

  .liush {
    display: flex;
    flex-direction: column;
  }

  .span_liushui {
    margin: 10px 0;
    width: 100%;
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .span_liushui span {
    padding-right: 20px;
  }

  .el-date-picker__time-header .el-date-picker__editor-wrap:nth-last-of-type(2) {
    display: none;
  }
</style>
